<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
  <title>下载</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.0/lib/index.css">
  <!-- 引入组件 -->
  <script src="js/rem.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vant@2.0/lib/vant.min.js"></script>
  <style>
    .content{
      width: 100vw;
      height: 6.03rem;
      background: url("image/h5fxym_bg.png") no-repeat;
      background-size: cover;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-size: 100% auto;
    }
    .btn{
      position: absolute;
      bottom: .56rem;
      width: 2.13rem;
      height: .4rem;
      line-height: .4rem;
      text-align: center;
      font-size: .18rem;
      color: #fff;
      border-radius: .2rem;
      background:linear-gradient(180deg,rgba(249,159,146,1) 0%,rgba(221,35,29,1) 100%);
    }
    .logo{
      width: 100%;
      height: .8rem;
      padding-top: 1rem;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .logo img{
      width: .8rem;
      height: .8rem;
      overflow: hidden;
      margin: 0 auto;
    }
  </style>
</head>
<body>
<div id="app">
  <div class="content">
    <div class="logo">
      <img  src="image/logo.png"/>
    </div>
    <div class="btn" @click="Down()">打开app</div>
  </div>
</div>
</body>
<script>
  let vant = window.vant;
  let app = new Vue({
    el: '#app',
    data: {
    },
    methods: {
      // 判断是否微信浏览器
      isWeiXin(){
        //window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
        var ua = window.navigator.userAgent.toLowerCase();
        //通过正则表达式匹配ua中是否含有MicroMessenger字符串
        if(ua.match(/MicroMessenger/i) == 'micromessenger'){
          return true;
        }else{
          return false;
        }
      },
      // 下载
      Down() {
        if (this.isWeiXin()){
          // vant.Toast('')
          vant.Dialog.alert({
            message: '点击右上角用手机自带浏览器打开',
            confirmButtonColor: '#e4393c'
          }).then(() => {
            // on close
          });
          return false;
        }
        let browser = {
          versions: (function () {
            let u = navigator.userAgent,
              app = navigator.appVersion;
            return {
              trident: u.indexOf("Trident") > -1 /*IE内核*/,
              presto: u.indexOf("Presto") > -1 /*opera内核*/,
              webKit: u.indexOf("AppleWebKit") > -1 /*苹果、谷歌内核*/,
              gecko: u.indexOf("Gecko") > -1 && u.indexOf("KHTML") == -1 /*火狐内核*/,
              mobile: !!u.match(/AppleWebKit.*Mobile.*/) /*是否为移动终端*/,
              ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) /*ios终端*/,
              android: u.indexOf("Android") > -1 || u.indexOf("Linux") > -1 /*android终端或者uc浏览器*/,
              iPhone: u.indexOf("iPhone") > -1 /*是否为iPhone或者QQHD浏览器*/,
              iPad: u.indexOf("iPad") > -1 /*是否iPad*/,
              webApp: u.indexOf("Safari") == -1 /*是否web应该程序，没有头部与底部*/,
              souyue: u.indexOf("souyue") > -1,
              superapp: u.indexOf("superapp") > -1,
              weixin: u.toLowerCase().indexOf("micromessenger") > -1,
              Safari: u.indexOf("Safari") > -1
            };
          })(),
          language: (
            navigator.browserLanguage || navigator.language
          ).toLowerCase() //获取浏览器语言
        };
        if (browser.versions.ios) {
          /***打开app的协议，有ios同事提供***/
          window.location.href = "xiaoyuzhong://";
          window.setTimeout(function () {
            // ios下载地址
            window.location.href = "https://apps.apple.com/cn/app/广州博学教育/id1481045238"
          }, 2000);
        } else if (browser.versions.android) {
          /***打开app的协议，有android同事提供***/
          window.location.href = "xyz://xiao_yu_zhong_app";
          setTimeout(function () {
            // android下载地址
            window.location.href = "https://fir.im/srdv";
          }, 2000);
        }
        // }
      }
    },
    mounted(){

    },
  })
</script>
</html>
